<template>
    <div>
        <div style="padding: 0px 0 ;">
            <el-input v-model="input" style="width:200px;" placeholder="根据客户名查找" suffix-icon="el-icon-search"></el-input>
            <el-button style="margin-left: 10px;" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <el-table :data="tableData" style="height: 500;overflow: auto;" :cell-class-name="tableRowClassName">
            <el-table-column prop="customerName" label="客户名" width="150">
            </el-table-column>
            <el-table-column prop="petName" label="宠物" width="150">
            </el-table-column>
            <el-table-column prop="nickName" label="主治医生" width="150">
            </el-table-column>
            <el-table-column prop="checkName" label="检查项目" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="新增时间" width="180">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="250">
                <template slot-scope="{row}">
                    <el-tag type="danger" v-if="row.status == 0">未支付</el-tag>
                    <el-tag v-if="row.status == 1">已支付，等待检查</el-tag>
                    <el-tag type="warning" v-if="row.status == 2">已检查，待发布结果</el-tag>
                    <el-tag type="success" v-if="row.status == 3">已发布</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="beginCheck(scope.row)" v-if="scope.row.status == 1">检查</el-button>
                    <el-button type="success" @click="publishCheck(scope.row)"
                        v-if="scope.row.status == 2">发布检查结果</el-button>
                    <el-button type="info" @click="showExamResult(scope.row)"
                        v-if="scope.row.status == 3">查看检查结果</el-button>
                    <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='我在想想'
                        icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="deleteById(scope.row.drugId)">
                        <el-button type="danger" slot="reference">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog style="text-align: center;" title="检查结果" :visible.sync="examdialogFormVisible">

            <el-card style="height: auto;">
                <el-table :data="examResult" style="width: 100%">
                    <el-table-column prop="attributeName" label="属性" width="180">
                    </el-table-column>
                    <el-table-column prop="exam" label="数值" width="180">
                    </el-table-column>
                    <el-table-column prop="standardValue" label="参考值" v-if="examResult">
                    </el-table-column>
                </el-table>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="examdialogFormVisible = !examdialogFormVisible">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog style="text-align: center;height: 1000px;" title="发布检查结果" :visible.sync="publishdialogFormVisible">
            <el-card style="height: auto;text-align: center;">
                <el-form :model="form" v-if="form.auxiliaryCheckId == 1">
                    <p style="font-size: 20px;">{{ form.checkName }}</p>
                    <el-form-item label="白细胞计数：" label-width="150px">
                        <el-input v-model="form.bxb" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label=" 红细胞计数：" label-width="150px">
                        <el-input v-model="form.hxb" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="血红蛋白浓度：" label-width="150px">
                        <el-input v-model="form.xhdb" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="血小板计数：" label-width="150px">
                        <el-input v-model="form.xxb" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="血糖浓度：" label-width="150px">
                        <el-input v-model="form.xtnd" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="form" v-if="form.auxiliaryCheckId == 2">
                    <p style="font-size: 20px;">{{ form.checkName }}</p>
                    <el-form-item label="超声描述：" label-width="150px">
                        <el-input v-model="form.csmm" autocomplete="off" type="textarea"></el-input>
                    </el-form-item>

                </el-form>
                <el-form :model="form" v-if="form.auxiliaryCheckId == 3">
                    <p style="font-size: 20px;">{{ form.checkName }}</p>
                    <el-form-item label="尿比重：" label-width="150px">
                        <el-input v-model="form.nbz" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="尿PH值：" label-width="150px">
                        <el-input v-model="form.nph" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="尿蛋白：" label-width="150px">
                        <el-input v-model="form.ndb" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="尿酮体：" label-width="150px">
                        <el-input v-model="form.ntt" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="尿糖：" label-width="150px">
                        <el-input v-model="form.nt" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitPublishCheckexam()">提 交</el-button>
                <el-button @click="publishdialogFormVisible = !publishdialogFormVisible">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "AuxiliaryCheck",
    data() {
        return {
            tableData: null,
            total: 0,
            page: 1,
            pageSize: 6,
            input: '',
            dialogFormVisible: false,
            examdialogFormVisible: false,
            publishdialogFormVisible: false,
            form: {},
            examResult: [],
        }
    },
    created() {
        this.load();
    },
    methods: {
        submitPublishCheckexam() {//提交检查结果
            var user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            this.form.checkUserId = user.id
            this.request.post("/attribute-exam/publishexam", this.form).then(res => {
                if (res.code == 200) {
                    this.publishdialogFormVisible = false
                    this.$message.success("成功发布检查结果!")
                    this.load();
                    this.from = {}
                }
            })
            this.load()
            console.log("当前form==>", this.form)
        },
        publishCheck(row) {//发布检查结果按钮函数
            this.publishdialogFormVisible = true
            this.form.checkName = row.checkName
            this.form.auxiliaryCheckId = row.auxiliaryCheckId
            this.form.petAuxiliaryCheckId = row.id

        },
        beginCheck(row) {//检查按钮函数
            this.request.post("/pet-auxiliary-check/beginCheck", row.id).then(res => {
                if (res.code == 200) {
                    this.$message.success("检查成功，等待发布检查结果！")
                    this.load()
                }
            })
        },
        showExamResult(r) {//查看辅助检查结果
            this.request.get("/attribute-exam/bypetauxiliarycheck/" + r.id).then(res => {
                console.log("res==>", res)
                this.examResult = res.data
            })
            this.examdialogFormVisible = true
        },
        tableRowClassName({ row, rowIndex }) {
            //样式
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        deleteById(id) {//删除
            this.request.delete(`/drug/${id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success('删除成功')
                    this.load()
                } else {
                    this.$message.success('删除失败')
                }
            })
        },
        reset() {//重置按钮方法
            this.input = "";
            this.load();
        },
        load() {//表格刷新
            this.request.get("/pet-auxiliary-check/page", {
                params: {
                    page: this.page,
                    pageSize: this.pageSize,
                    name: this.input
                }
            }).then(res => {
                this.tableData = res.data.records;
                console.log("当前records==>", res.data)
                this.total = res.data.total;
            })
        },
        handleSizeChange(pageSize) {//分页每页条数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(page) {//分页页码选择
            this.page = page;
            this.load();
        }
    }
}
</script>

<style >
.warning-row {
    background: oldlace;
}

.success-row {
    background: #f0f9eb;
}

.el-table::before {
    height: 0px;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>